<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/richScan.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
</head>
<body>
<div class="header-box">
  <p>扫描借阅</p>
</div>
<div class="back_title">
  <div class="back_title_box">
    <img src="img/scanRead/tishi@2x.png">
    <span>每次最多可借5本哦</span>
  </div>
</div>
<div class="back_list">
  <div class="back_list_box" >
    <ul id="back_list_box">
      <li>
        <b></b>
        <div class="box_con">
          <img src="img/index/tuceng 32@2x.png">
          <div class="box_right">
            <p> 牙虫大搬家 </p>
            <p>(日)西本康子</p>
            <p>主题:<i>智商</i></p>
            <p>适龄:<b>2-4岁</b></p>
            <div class="xingxing1">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing6@2x.png">
              <span>4.3</span>
            </div>
          </div>
        </div>
        <div class="box_con_bott">
          <div class="bott_left">
            <span>费用：</span>
            <span><i>100</i>鱼币</span>
            <span>(￥<i>1</i>元)</span>
          </div>
          <div class="bott_right">
            <span>时间：</span>
            <i class="reduc">-</i>
            <b>1</b>
            <i class="add">+</i>
            <span>周</span>
          </div>
        </div>
      </li>
      <li>
        <b></b>
        <div class="box_con">
          <img src="img/index/tuceng 30@2x.png">
          <div class="box_right">
            <p> 鸭子骑车记 </p>
            <p>(美)大卫·香农</p>
            <p>主题:<i>智商</i></p>
            <p>适龄:<b>2-4岁</b></p>
            <div class="xingxing1">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing6@2x.png">
              <span>4.3</span>
            </div>
          </div>
        </div>
        <div class="box_con_bott">
          <div class="bott_left">
            <span>费用：</span>
            <span><i>100</i>鱼币</span>
            <span>(￥<i>1</i>元)</span>
          </div>
          <div class="bott_right">
            <span>时间：</span>
            <i class="reduc">-</i>
            <b>1</b>
            <i class="add">+</i>
            <span>周</span>
          </div>
        </div>
      </li>
      <li>
        <b></b>
        <div class="box_con">
          <img src="img/index/tuceng 31@2x.png">
          <div class="box_right">
            <p> 胆小鬼威利 </p>
            <p>(英)安东尼·布朗</p>
            <p>主题:<i>智商</i></p>
            <p>适龄:<b>2-4岁</b></p>
            <div class="xingxing1">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing5@2x.png">
              <img src="img/index/xing6@2x.png">
              <span>4.3</span>
            </div>
          </div>
        </div>
        <div class="box_con_bott">
          <div class="bott_left">
            <span>费用：</span>
            <span><i>100</i>鱼币</span>
            <span>(￥<i>1</i>元)</span>
          </div>
          <div class="bott_right">
            <span>时间：</span>
            <i class="reduc">-</i>
            <b>1</b>
            <i class="add">+</i>
            <span>周</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<div class="footer_kb1"></div>
<div class="chose_back">
  <div class="chose_back_box" id="chose_back_box">
    <a href="richScan.html" id="rich_scan">
      <img src="img/scanRead/saomiao(1)@2x.png">
      继续扫描
    </a>
    <a href="pay.html" class="back_select" id="jieyue">
      <img src="img/scanRead/fufei@2x.png">
      借阅
    </a>
  </div>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="js/base.js"></script>
<script>
  $('#back_list_box li>b').click(function () {
    if(!$(this).hasClass("back_active")){
      $(this).attr('class','back_active');
    }else{
      $(this).attr('class','');
    }
  });
  /**数量加减**/
  $('#back_list_box').on('click','.reduc', function () {
    var value = parseInt($(this).next('b').text());
    if (value > 1) {
      value--;
      $(this).next('b').html(value);
    }
  });
  $('#back_list_box').on('click','.add', function () {
    var value = parseInt($(this).prev('b').text());
    value++;
    $(this).prev('b').html(value);
  });

</script>
</html>